import { FC, memo, useState } from 'react'
import { usePage } from '@hs-admin/utils'
import { Button, Space, Table } from 'antd'
import { getSettingAtlasList } from '@/api/setting/atlas'
import { Resizable } from 'react-resizable'
import './style.less'
import useAntdTable from './use-table'

const ResizeableTitle = memo((props: { [x: string]: any; onResize: any; width: any }) => {
  const { onResize, width, ...restProps } = props

  if (!width) {
    return <th {...restProps} />
  }

  return (
    <Resizable width={width} height={0} onResize={onResize} draggableOpts={{ enableUserSelectHack: false }}>
      <th {...restProps} />
    </Resizable>
  )
})

const TablePage: FC = () => {
  const [data, setData] = useState([])

  const doRequest = () => {
    return getSettingAtlasList({
      page: pagination.current,
      page_size: pagination.pageSize
    }).then((res) => {
      setData(res.items)
      return res
    })
  }
  const { pagination } = usePage(doRequest)
  const originColumns = [
    {
      title: '图谱名称',
      dataIndex: 'name',
      width: 200
    },
    {
      title: '图谱描述',
      dataIndex: 'description',
      width: 200,
      ellipsis: true
    },
    {
      title: '所属领域',
      dataIndex: 'domain.name',
      width: 200
    },
    {
      title: '最新维护时间',
      dataIndex: 'updated_at',
      type: 'datetime',
      width: 200
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link">删除</Button>
        </Space>
      )
    }
  ]

  const { columns } = useAntdTable(originColumns)

  return (
    <div id="components-table-demo-resizable-column">
      <Table
        columns={columns}
        dataSource={data}
        rowKey={'id'}
        components={{
          header: {
            cell: ResizeableTitle
          }
        }}></Table>
    </div>
  )
}

export default TablePage
